import React from "react";
import * as _lodash from "lodash";
import { useEditStore } from "@/context/editStore/index";
// 编辑器封装的组件
import {WrapTitle, LabeInput, LayoutFlex, LabeSlideFlex, ColorPickFlex} from "../../../components";
import "./index.less";

function HeImgControlConfig(): JSX.Element {
    const {state, dispatch} = useEditStore();
    // 配置属性
    const curData = _lodash.cloneDeep(state.curSelectedAssembly);
    const list = _lodash.cloneDeep(state.assemblyList);
    const {data = {}} = curData;
    const {resources = {}} = data;

    const inputHandleChange = (value: string | number, str: string) => {
        _lodash.set(curData, `data.resources.value.child.${str}.value`, value);
        dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
        const index = list.findIndex((item: any) => {
            return item?.onlyCode == curData.onlyCode;
        });
        list.splice(index, 1, curData);
        dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
    };

    const layoutChange = (value: string) => {
        console.log("-layoutChange-");
        console.log(value);
        _lodash.set(curData, "data.resources.attrs.child.model.value", value);
        dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
        const index = list.findIndex((item: any) => {
            return item?.onlyCode == curData.onlyCode;
        });
        list.splice(index, 1, curData);
        dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
    };
        // 处理样式方法
    const handleStyles = (child: any) => {
        const htmlNode = [];
        const numberArr = ["cmpLowerPadding", "cmpUpperPadding", "cmpLowerRadius","cmpUpperRadius","pagePadding", "titleSize", "infoSize"];
        const strArr = ["titleColor", "cmpBackground", "infoColor"];
        const list = _lodash.cloneDeep(state.assemblyList);
        console.log("----handleStyles---");
        console.log(child);
        const styleChange = (value: any, str: string) => {
            if([...numberArr, ...strArr].indexOf(str) > -1) {
                _lodash.set(curData, `data.resources.styles.child.${str}.value`, value);
                dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
                const index = list.findIndex((item: any) => {
                    return item?.onlyCode == curData.onlyCode;
                });
                list.splice(index, 1, curData);
                dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
            }
        };

        if(!child) {
            return null;
        }
        for (const key in child) {
            if(numberArr.indexOf(key) > -1) {
                htmlNode.push(<LabeSlideFlex key={key} slide={child?.[key]} onChange={(value)=>styleChange(value, key)}></LabeSlideFlex>);
            }
            
            if(strArr.indexOf(key) > -1) {
                htmlNode.push(<ColorPickFlex  key={key} color={child?.[key]} onChange={(value) => {styleChange(value, key)}}></ColorPickFlex>);
            }
        }
        return htmlNode;
    };

    
    return (
        <div className="box-right-all">
            <div className="right-all-title">{data.name}</div>
            <div className="right-all-value">
                <WrapTitle title={resources?.value?.label}></WrapTitle>
                <div className="right-all-value-box">
                    <LabeInput onChange={(value) => {inputHandleChange(value, "title")}} label={resources?.value?.child?.title?.label} value={resources?.value?.child?.title?.value} ></LabeInput>
                    <LabeInput onChange={(value) => {inputHandleChange(value, "info")}} label={resources?.value?.child?.info?.label} value={resources?.value?.child?.info?.value} ></LabeInput>
                </div>
            </div>
            <div className="right-all-attrs">
                <WrapTitle  title={resources?.attrs?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {resources?.attrs?.child?.model &&
                    <LayoutFlex 
                        defaultValue={resources?.attrs?.child?.model} 
                        options={resources?.attrs?.child?.model?.data}
                        onChange={layoutChange}
                    ></LayoutFlex>}
                </div>
            </div>
            <div  className="right-all-style">
                <WrapTitle title={resources?.styles?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {handleStyles(resources?.styles?.child)}
                </div>
            </div>
        </div>
    );
};
export default HeImgControlConfig;